<template>
	<div class="survey_statistics_wrapper">
		<div class="head">
			<p>{{ hurveyStatData.name }}</p>
			<span>答题人数：{{ hurveyStatData.total }}人</span>
		</div>
		<el-row type="flex">
			<el-col
				:span="hurveyListData.length > 0 ? 6 : 24"
				class="survey_list_wrapper"
				v-infinite-scroll="loadSuvrveyData"
				:infinite-scroll-disabled="isDisabled"
				v-loading="loading"
			>
				<template v-if="isLoad && !loading && hurveyListData.length === 0">
					<el-empty :image-size="100" description="暂时无人答题"></el-empty>
				</template>
				<template v-else>
					<div :class="['item', { active: item.id === hurveyId }]" v-for="(item, index) in hurveyListData" :key="index" @click="handleLookSata(item.id)">
						{{ item.title }}
					</div>
					<p class="loading" v-if="loading">加载中</p>
					<p class="moreover" v-if="!loading && moreover">没有更多了</p>
				</template>
			</el-col>
			<el-col v-if="hurveyListData.length > 0" :span="18" class="survey_stat_wrapper" v-loading="statLoading">
				<div class="item" v-for="(item, index) in hurveyStatData.questions" :key="index">
					<dl>
						<dt>{{ index + 1 }}、({{ item.questionType | subjectType }}) {{ item.content }}</dt>
						<dd v-for="(v, i) in item.options" :key="i">
							<p>{{ letterValue.charAt(i) }}、{{ v.content }}</p>
							<div class="stat">
								<span>选中{{ v.selectNum }}次</span>
								<el-progress :percentage="parseFloat(v.ratio) * 100"></el-progress>
							</div>
						</dd>
					</dl>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { tbQuestionnaireInfoQuery, tbQuestionnaireInfoStatQuestionnaire } from '@/api/admin/survey/tbQuestionnaireInfo';
export default {
	data() {
		return {
			loading: false,
			listQuery: {
				page: 1,
				limit: 10
			},
			dataCount: 0,
			hurveyId: '',
			hurveyListData: [],
			hurveyStatData: {},
			statLoading: false,
			isLoad: false,
			letterValue: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
		};
	},
	computed: {
		moreover() {
			return this.listQuery.limit >= this.dataCount;
		},
		isDisabled() {
			return this.loading || this.moreover;
		}
	},
	filters: {
		subjectType(value) {
			if (value == 1) {
				return '单选题';
			} else if (value == 2) {
				return '多选题';
			} else if (value == 3) {
				return '填空题';
			} else if (value == 4) {
				return '判断题';
			} else if (value == 5) {
				return '问答题';
			}
		}
	},
	watch: {
		hurveyId(val) {
			this.getSuvrveyStatData(val);
		},
		activeValue(val) {
			this.statLoading = true;
			this.getSurveyAnswerData(val);
		}
	},
	mounted() {
		this.getSuvrveyListData();
	},
	methods: {
		//获取问卷列表数据
		async getSuvrveyListData() {
			let params = { page: 1, limit: this.listQuery.limit };
			let result = await tbQuestionnaireInfoQuery(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.hurveyListData = !result.data ? [] : [...result.data];
				this.hurveyId = this.hurveyListData[0].id;
			}
		},

		//加载答题用户
		loadSuvrveyData() {
			if (this.moreover) return false;
			this.listQuery.page++;
			this.listQuery.limit = this.listQuery.page * 10;
			this.getSuvrveyListData();
		},

		//获取统计数据
		async getSuvrveyStatData(id) {
			let result = await tbQuestionnaireInfoStatQuestionnaire(id).then((res) => res.data);
			if (result.code === '0') {
				this.hurveyStatData = !result.data ? {} : result.data[0];
			}
		},

		//切换问卷
		handleLookSata(id) {
			this.hurveyId = id;
		}
	}
};
</script>

<style lang="scss" scoped>
.survey_statistics_wrapper {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 212px);
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 24px;
		padding-bottom: 15px;
		border-bottom: solid 1px #eee;
	}
	.el-row {
		flex: 1;
		overflow: hidden;
	}
}
.survey_list_wrapper {
	overflow: auto;
	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 2px;
		/*background: #fd7286;*/
		transition: color 0.2s ease;
		background-color: rgba(0, 0, 0, 0.15);
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		line-height: 24px;
		border-bottom: solid 1px #eee;
		cursor: pointer;
		&:hover {
			background-color: #d9ecff;
		}
		&.active {
			color: #fff;
			background-color: #409eff;
			dd {
				color: #fff;
			}
		}
	}
	p.loading,
	p.moreover {
		color: #ccc;
		text-align: center;
		padding: 10px 0;
	}
	p.loading::after {
		content: '...';
		animation: showDot 1.5s linear infinite;
	}
}
.survey_stat_wrapper {
	overflow: auto;
	border-left: solid 1px #ddd;
	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 2px;
		/*background: #fd7286;*/
		transition: color 0.2s ease;
		background-color: rgba(0, 0, 0, 0.15);
	}
	.item {
		padding: 15px;
		border-top: solid 1px #eee;
	}
	dl {
		border-top: dashed 1px #eee;
		&:first-child {
			border-top: none;
		}
	}
	dt {
		font-size: 16px;
		font-weight: bold;
	}
	p {
		margin-top: 10px;
		span {
			margin-right: 10px;
		}
	}
	.stat {
		display: flex;
		align-items: center;
		span {
			width: 100px;
			flex-shrink: 0;
			color: #999;
		}
		.el-progress {
			flex: 1;
		}
	}
}

@keyframes showDot {
	0% {
		content: '';
	}
	33.3333% {
		content: '.';
	}
	66.6666% {
		content: '..';
	}
	100% {
		content: '...';
	}
}
</style>
